<template>
    <div>
        <z-input v-model="inputValue" center>
         <div class="cursor-pointer" slot="prepend" @click="handleClick('decrease')">
            <z-icon name="jian"></z-icon>
         </div>
         <div class="cursor-pointer" slot="append" @click="handleClick('increase')">
            <z-icon name="jia"></z-icon>
         </div>
        </z-input>
    </div>
</template>
<script>
    export default {
        name: 'z-inputnumber',
        props: {
            value: {
                type: Number,
                default: 0,
            },
            step: {
                type: Number,
                default: 1
            }
        },
        data() {
            return {
                
            }
        },
        computed: {
            inputValue: {
               get() {
                 return this.value
               },
               set(value) {
                 this.$emit('input', value)
               }
            }
        },
        methods: {
            handleClick(type) {
                if(type === 'increase') {
                    this.inputValue += this.step
                } else {
                    this.inputValue -= this.step
                }
            }
        }
    }
</script>
<style scoped>
.is-disabled{
    cursor: not-allowed !important;
}
.cursor-pointer {
    cursor: pointer;
}
.input-number-inner {
    width: 150px;
}
</style>